<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>分步骤表单</title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">

</head>
<body>
<div id="tabForm" ui-config="autoFit:true,tabWidth:95,headerWidth:115,tabPosition:'left'">
    <div ui-config="id:'base',title:'<span class=\'badge badge-white\'>1</span>基本信息',showBtnBar:true,btnBarDir:'right',url:'base_form.html',lazyLoad:true,
    onLoadComplete:function(){load_base();},buttons:[{label: '下一步',style: 'button_submit',onClick:function(){step1();}}]">
    </div>
    <div ui-config="id:'resume',closable:false,title:'<span class=\'badge badge-white\'>2</span>其他信息',showBtnBar:true,btnBarDir:'right',lazyLoad:true,
    url:'resume_form.html',onLoadComplete:function(){load_resume();},buttons:[{label: '上一步',style: 'button',onClick:function(){step2();}},
    {label: '下一步',style: 'button_submit',onClick:function(){step3();}}]">
    </div>
    <div ui-config="id:'member',title:'<span class=\'badge badge-white\'>3</span>家庭成员',closable:false,showBtnBar:true,btnBarDir:'right',lazyLoad:true,
    url:'member_form.html',onLoadComplete:function(){load_member();},buttons:[{label: '上一步',style: 'button',onClick:function(){step4();}},{label: '完成',style: 'button_submit',onClick:function(){step5();}}]">
    </div>
    <div ui-config="id:'help',title:'>>帮助<<',closable:false,iniframe:true,lazyLoad:true,url:'help.html'">
    </div>
</div>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../lib/template.js"></script>
<script type="text/javascript" src="../../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function () {
        var tab = $('#tabForm').uiTabs();
        tab.uiTabs('disableTab',1);
        tab.uiTabs('disableTab',2);
    });
    function load_base() {
        var form = $('#base_form');
        form.uiForm({
            template: 'base_form_temp',
            onLoadSuccess: function () {
                $('#sel').uiCombobox();
            }
        });
        form.uiForm('load', 'formData.json');
    }
    function load_resume() {
        var form = $('#resume_form');
        form.uiForm({
            template: 'resume_form_temp',
            onLoadSuccess: function () {
                var txtBirth = $('#txtBirth');
                var selStatus = $('#selStatus')
                txtBirth.uiDate();
                selStatus.uiCombobox();
            }
        });
        form.uiForm('load', 'formData.json');
    }
    function load_member() {
        var form = $('#member_form');
        form.uiForm({
            template: 'member_form_temp'
        });
        form.uiForm('load', 'formData.json');
    }
    function step1() {
        var tab = $('#tabForm');
        tab.uiTabs('disableTab',0);
        tab.uiTabs('enableTab',1);
        tab.uiTabs('select',1);
    }
    function step2() {
        var tab = $('#tabForm');
        tab.uiTabs('disableTab',1);
        tab.uiTabs('enableTab',0);
        tab.uiTabs('select',0);
    }
    function step3() {
        var tab = $('#tabForm');
        tab.uiTabs('disableTab',1);
        tab.uiTabs('enableTab',2);
        tab.uiTabs('select',2);
    }
    function step4() {
        var tab = $('#tabForm');
        tab.uiTabs('disableTab',2);
        tab.uiTabs('enableTab',1);
        tab.uiTabs('select',1);
    }
    function step5() {
        alert('完成');
    }
</script>
</html>